<script lang="ts" setup>
// typescript
interface IProps {
  a?: string
}

const props = withDefaults(defineProps<IProps>(), {});
</script>

<!-- 评论卡片 -->
<template>
  <view class="w-components-container w-comment-card">
    <!-- 用户信息 -->
    <view class="info">
      <view>
        <view class="avatar">
          <image src="../../static/images/default/avatar.png"></image>
        </view>
        <view class="nickname">
          <text>Mr.Jiang</text>
        </view>
      </view>
      <view>
        <text class="comment-date">2022-12-15 12:00</text>
      </view>
    </view>
    <!-- 评论内容 -->
    <view class="comment-content">
      <!-- 文本内容 -->
      <view class="comment-text">
        <text>质量没的说,物流速度很快,摸起来手感nice,质量没的说,物流速度很快,摸起来手感nice.</text>
      </view>
      <!-- 图片、视频内容 -->
      <view class="comment-images">
        <view><image src="../../static/images/delete/goods/d1.jpg"></image></view>
        <view><image src="../../static/images/delete/goods/d2.jpg"></image></view>
        <view><image src="../../static/images/delete/goods/d3.jpg"></image></view>
        <view><image src="../../static/images/delete/goods/d4.jpg"></image></view>
        <view><image src="../../static/images/delete/goods/d4.jpg"></image></view>
        <!-- 更多按钮 -->
        <view class="more">
          <text>更多</text>
        </view>
      </view>
    </view>
    <!-- 商品参数 -->
    <view class="params-view">
      <text>藏蓝色</text>
      <text>64GB</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-comment-card {
  padding: 30rpx;
  background-color: #fff;
}

.info {
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > view {
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 64rpx;
    height: 64rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nickname {
    color: $text-color;
    font-size: 28rpx;
    margin-left: 10rpx;
  }

  .comment-date {
    color: #BCBCBC;
    font-size: 24rpx;
  }
}

.comment-content {
  margin: 20rpx 0;

  .comment-text {
    color: $text-color;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }

  .comment-images {
    display: flex;
    flex-wrap: warp;

    > view {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .more {
      width: auto;
      height: 100rpx;
      padding: 4rpx 14rpx 0 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eee;
      
      text {
        writing-mode: tb;
        font-size: 24rpx;
        color: #333;
        letter-spacing: 3px;
      }
    }
  }
}

.params-view {
  text {
    color: #BCBCBC;
    font-size: 24rpx;
    margin-right: 20rpx;
  }
}
</style>